<!--
	查询详情页面
-->
<template>
	<view class="container">
		<!-- tabBar -->
		<scroll-view class="scroll-row" :scroll-into-view="scrollInto" scroll-with-animation>
			<view class="scroll-view-content">
				<view v-for="(item, index) in tabBar" :key="index" class="scroll-row-item"
					:id="item.value"
					:class="tabIndex == index ? 'scroll-current' : ''"
					@click="changTab(item, index)">
					{{item.label}}
				</view>
			</view>
		</scroll-view>
		<!-- 内容联动 -->
		<swiper :duration="150" :current="tabIndex" class="swiper-box" 
			:style="{'height': scrollHeight + 'px'}" @change="swiperChangeToTab" @animationfinish="animationEnd">
			<swiper-item v-show="tabIndex == 0">
				<scroll-view scroll-y :style="{'height': scrollHeight + 'px'}" :scroll-top="scrollTop" class="scroll-view">
					<chart-data class="scroll-content"></chart-data>
				</scroll-view>
			</swiper-item>
			<!-- TODO APP不能支持全局页面级loading -->
			<!-- #ifdef APP-PLUS -->
			<swiper-item v-show="tabIndex == 1">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<swiper-item v-show="tabIndex == 1" v-loading="!listLoad">
			<!-- #endif -->
				<table-data class="scroll-content" :scrollHeight="scrollHeight"></table-data>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import chartData from './chart-data'
import tableData from './table-data'
export default {
	components: {
		'chart-data': chartData, // 图表
		'table-data': tableData // 列表
	},
	data() {
		return {
			deviceId: '', // 设备ID
			scrollTop: 0, // 滚动位置
			tabIndex: 0, // 选中默认0
			scrollInto: 'chart', // 滚动选中
			currentView: 'chart-data', // 图表和列表组件选择
			scrollHeight: 600, // 列表高度
			listLoad: false, // 数据列表页是否加载
			tabBar: [{
				label: '数据图表',
				value: 'chart'
			}, {
				label: '数据列表',
				value: 'table'
			}]
		}
	},
	onLoad(res) {
		this.pageStyleSetting()
		this.deviceId = res.id // 设置ID
		// js文件引入的vuex实例在APP中state无变化，故使用该方法设置数据
		uni.$on('setDetailsData', res => {
			this.setData(res)
		})
	},
	onUnload() {
		uni.$off('setDetailsData', this.setData)
	},
	methods: {
		// 页面设置
		pageStyleSetting() {
			uni.getSystemInfo({
				success: res => {
					this.scrollHeight = res.windowHeight - uni.upx2px(92 + 30)
				}
			})
		},
		// 数据设置
		setData(data) {
			this.$store.dispatch('details/setReadList', data)
    		this.$store.dispatch('details/detailsDataHandler', data)
			this.$store.dispatch('details/listHandler')
		},
		// 选项点击切换
		changTab(item, index) {
			console.log(item)
			if(this.tabIndex === index) return
			this.tabIndex = index
			this.scrollInto = item.value // 滚动到指定元素
			this.currentView = item.value + '-data' // 设置组件
			if(item.value == 'table') {
				this.scrollHeight += 15
			}
		},
		// 滑动页面联动
		swiperChangeToTab(e) {
			const index = e.detail.current
			const item = this.tabBar[index]
			this.changTab(item, index)
		},
		// 加载数据
		onloadData() {
			const id = this.deviceId
		},
		// 切换页面动画加载结束
		animationEnd(e) {
			const current = e.detail.current
			const name = this.tabBar[current].value
			if(name == 'table') {
				if(!this.listLoad) {
					this.listLoad = true
				}
			}
		}
	}
}
</script>

<style lang="less" scoped>
@import url('@/common/scroll-row.less');
.swiper-box {
	margin: 0 -15rpx -30rpx -15rpx;
	.scroll-content {
		padding-top: 30rpx;
	}
}
</style>
